import React, { useRef } from 'react';
import {Button, message, Form, Input} from 'antd';
import {
  DrawerForm
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import {MinusCircleOutlined} from "@ant-design/icons/lib";
import './index.less'
import { request } from 'umi';



export default (props: any) => {
  const formRef = useRef();

  const formItemLayout = {
    labelCol: {
      xs: { span: 18 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 18 },
      sm: { span: 18 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 18, offset: 0 },
      sm: { span: 18, offset: 0 },
    },
  };


  return (
    <DrawerForm<{
      qcNames: [];
      productName: string;
    }>
      title={props.name}
      formRef={formRef}
      trigger={
        <Button type="primary" key="primary" >
          {props.name}
        </Button>
      }
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        console.log(values)
        await request('/api/product/create', {
          method: 'POST',
          data:{
            productName: values.productName,
            qcNames:values.qcNames
          },
          skipErrorHandler: true,

        }).then( data => {
          if (data.success){
            props.refreshInit()
            message.success(data.message);
          }
        });
        // 不返回不会关闭弹框
        return true;
      }}
    >

      <Form.Item
        label="产品名称"
        name="productName"
        rules={[{ required: true, message: '请输入产品名称!' }]}
      >
        <Input />
      </Form.Item>

      <Form.List
        name="qcNames"
        rules={[
          {
            validator: async (_, qcName) => {
              if (!qcName || qcName.length < 1) {
                return Promise.reject(new Error('至少需要一个质量特性'));
              }
            },
          },
        ]}
      >



        {(fields, { add, remove }, { errors }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                label={index === 0 ? '质量特性' : ''}
                required={true}
                key={field.key}
              >
                <Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: "请检查此项",
                    },
                  ]}
                  noStyle
                >
                  <Input placeholder="请输入质量特性名称" style={{ width: '60%' }} />
                </Form.Item>
                {fields.length > 1 ? (
                  <MinusCircleOutlined
                    className="dynamic-delete-button"
                    onClick={() => remove(field.name)}
                  />
                ) : null}
              </Form.Item>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                style={{ width: '100%' }}
                icon={<PlusOutlined />}
              >
                添加质量特性
              </Button>
              <Form.ErrorList errors={errors} />
            </Form.Item>
          </>
        )}
      </Form.List>
    </DrawerForm>
  );
};
